<template>
    <div class="permission-management">
      <!-- 角色管理 -->
      <div class="mb-4 flex justify-between">
        <el-button type="primary" @click="openRoleDialog">
          <el-icon><Plus /></el-icon>
          新增角色
        </el-button>
      </div>
  
      <el-table :data="roles" border stripe>
        <el-table-column prop="name" label="角色名称" />
        <el-table-column prop="desc" label="描述" />
        <el-table-column label="操作" width="200">
          <template #default="{row}">
            <el-button size="small" @click="editRole(row)">编辑</el-button>
            <el-button size="small" @click="assignPermission(row)">分配权限</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 角色编辑对话框 -->
      <el-dialog v-model="roleDialogVisible" :title="roleDialogTitle">
        <el-form :model="currentRole" label-width="80px">
          <el-form-item label="角色名称">
            <el-input v-model="currentRole.name" />
          </el-form-item>
          <el-form-item label="角色描述">
            <el-input v-model="currentRole.desc" type="textarea" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="roleDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveRole">保存</el-button>
        </template>
      </el-dialog>
  
      <!-- 权限分配对话框 -->
      <el-dialog v-model="permissionDialogVisible" title="分配权限">
        <el-tree
          ref="treeRef"
          :data="permissions"
          show-checkbox
          node-key="id"
          :default-expand-all="true"
          :props="treeProps"
        />
        <template #footer>
          <el-button @click="permissionDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="savePermissions">保存</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  import { ElButton, ElDialog, ElForm, ElInput, ElTable, ElTableColumn, ElTree, ElIcon } from 'element-plus'
  import { Plus } from '@element-plus/icons-vue'
  
  // 权限树数据
  const permissions = ref([
    {
      id: 'system',
      name: '系统管理',
      children: [
        { id: 'user:manage', name: '用户管理' },
        { id: 'role:manage', name: '角色管理' }
      ]
    },
    {
      id: 'inventory',
      name: '库存管理',
      children: [
        { id: 'stock:view', name: '查看库存' },
        { id: 'stock:edit', name: '编辑库存' }
      ]
    }
  ])
  
  // 角色数据
  const roles = ref([
    { id: 1, name: '管理员', desc: '系统管理员', permissions: ['*'] },
    { id: 2, name: '普通员工', desc: '普通用户权限', permissions: ['stock:view'] }
  ])
  
  // 对话框状态
  const roleDialogVisible = ref(false)
  const permissionDialogVisible = ref(false)
  const currentRole = ref({})
  const selectedRole = ref(null)
  const treeRef = ref(null)
  const treeProps = { label: 'name', children: 'children' }
  
  // 计算属性
  const roleDialogTitle = computed(() => 
    currentRole.value.id ? '编辑角色' : '新增角色'
  )
  
  // 方法
  const openRoleDialog = () => {
    currentRole.value = { name: '', desc: '' }
    roleDialogVisible.value = true
  }
  
  const editRole = (role) => {
    currentRole.value = { ...role }
    roleDialogVisible.value = true
  }
  
  const saveRole = () => {
    if (!currentRole.value.id) {
      currentRole.value.id = roles.value.length + 1
      roles.value.push(currentRole.value)
    } else {
      const index = roles.value.findIndex(r => r.id === currentRole.value.id)
      roles.value.splice(index, 1, currentRole.value)
    }
    roleDialogVisible.value = false
  }
  
  const assignPermission = (role) => {
    selectedRole.value = role
    treeRef.value.setCheckedKeys(role.permissions)
    permissionDialogVisible.value = true
  }
  
  const savePermissions = () => {
    selectedRole.value.permissions = treeRef.value.getCheckedKeys()
    permissionDialogVisible.value = false
  }
  </script>